<template>
  <div
    @click="handleClick"
    @keydown="handleKeydown"
    >
    <el-input suffix-icon="el-icon-document" :placeholder="$t(tip)" v-model="fileName" readonly/>
    <input class="file-input" :id="id" type="file" ref="input" :name="name"
      @change="handleChange" :accept="accept" />
  </div>
</template>
<script>
import UTILS from "common/src/utils/utils";
/**
 * file
 */
export default {
  name: "EduFileInput",
  props: {
    id: {
      default: ''
    },
    name: {
      default: ''
    },
    disabled:{
      default: false
    },
    limit:{
      default: 1
    },
    accept:{
      default: ""
    },
    tip: {
      default: 'label.selectFile'
    }
  },
  data() {
    return {
      fileName: ''
    };
  },
  mounted() {},
  created() {},
  methods: {
    handleClick() {
      if (!this.disabled) {
        this.fileName = null;
        this.$refs.input.value = null;
        this.$refs.input.click();
      }
    },
    handleChange(ev) {
      const files = ev.target.files;
      if (!files) return;
      this.fileName = files[0].name;
    },
    handleKeydown(e) {
      if (e.target !== e.currentTarget) return;
      if (e.keyCode === 13 || e.keyCode === 32) {
        this.handleClick();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.file-input{display: none;}
</style>
